<!-- by your name -->
<template>
  <view class="gc-cell flex" v-if="visible">
    <view class="gc-cell__label" :style="labelStyle">{{ label }}</view>
    <view>：</view>
    <view class="flex-1 wb" v-if="!isArray">{{ value }}</view>

    <view v-else class="flex-1">
      <view class="wb" v-for="(item, index) in value" :key="index">
        <view class="gc-cell__line" v-if="hasLine(item)"></view>
        <template v-else>{{ item }}</template>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script>
  export default {
    name: 'GcCell',
    props: {
      label: String,
      labelWidth: {
        type: String,
        default: 'auto'
      },
      value: {
        type: [Array, String, Number],
        default: ''
      },
      // 是否没有value 直接隐藏
      hide: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {}
    },
    computed: {
      isArray() {
        return Array.isArray(this.value)
      },
      visible() {
        if (!this.hide) {
          return true
        }
        return this.hide && (this.value || this.value === 0)
      },
      labelStyle() {
        return {
          width: this.labelWidth
        }
      }
    },
    methods: {
      // 初始化方法
      hasLine(item) {
        return item === '{{line}}'
      },
      init() {}
    }
  }
</script>
<style lang="scss" scoped>
  .gc-cell {
    font-size: 26upx;
    color: #888;
    // line-height: 20upx;
    &__line {
      // height: 1px;
      width: 100%;
      // background: #ddd;
      margin: 3px 0;
      border-bottom: 1px dashed #ddd;
    }
    &__label {
      text-align-last: justify;
      text-align: justify;
      text-justify: inter-ideograph; // 这行必加，兼容ie浏览器
      margin-bottom: -40upx;
      &::after {
        content: '';
        overflow: hidden;
        height: 0;
        display: inline-block;
        width: 100%;
      }
    }
  }
</style>
